<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <script type="text/javascript" src="/markdownjs/showdown.min.js"></script>
</head>  
<style>
         body{
              margin:0px; 
              padding:0px;
         }
         #header, #footer{ 
             height: 50px;
             /*background: #F8F8FF;*/
         }
         #footer{
             background: #DCDCDC
         }
         #content .main{
             height: 600px;
             /*background: #F8F8FF;*/
             overflow: auto;
         }
         #content .main .title{
             height: auto;
             margin:0px; 
             padding:0px;
             /*background: #F8F8FF;*/
             /*overflow: auto;*/
         }
         #content .main .content1{
             height: auto;
             margin-left:30px;
             width:97%;
             /*background: #F8F8FF;*/
             /*overflow: auto;*/
         }
         
         #content .main .comments{
             height: auto;
             width:100%;
             /*background: #F8F8FF;*/
             /*overflow: auto;*/
         }
         
         #content .aside{
             height: 600px;
             width: 250px;
             background: #F8F8FF;
             float: left;
         }
         #content .aside .header{
             height: 150px;
             width: 150px;
             /*background: red;*/
             margin-left: 50px;
             margin-top: 10px;
             /*overflow: center;*/
         }
         #headNavi{
             height: 40px;
             width: 100%;
             background: black;
             color: white;
             font-size: 24px;
         }       
         
        #ul1{
           list-style-type:none;
           margin:0;
           padding:0;
           overflow:hidden;
          }
        .li1{
           float:left;
         }
         a:link,a:visited{
          text-align:center;
          padding:6px;
          text-decoration:none;
         }
        
          a:link {color: #993333} /* 未访问的链接 */
　　       a:visited {color: #993333}	/* 已访问的链接 */
　　       a:hover {color: #993333}	/* 鼠标移动到链接上 */
　　       a:active {color: #993333}	/
        .ha:link,a:visited{
          /*background-color: black;
          background-color: #000000;*/
          color: #993333;
          font-weight: bold;
          width: 120px;
          display: block;
          text-transform: uppercase;
          /*color: white;*/
         }
        .ha:hover,a:active{
          background-color: #cc0000;
          color: white;
         /* color: #FFFFFF;*/
          }
          
         
</style>

<body>
    <!-- header导航栏 -->
    <div id="headNavi">
      <ul id="ul1">
        <li class="li1"><a class="ha" href="/tzxblog">首页</a></li>
        <li class="li1"><a class="ha" href="/tzxblog/categories">分类</a></li>
        <li class="li1"><a class="ha" href="/tzxblog/archives">归档</a></li>
        <li class="li1"><a class="ha" href="/tzxblog/books">书单</a></li>
        <li class="li1"><a class="ha" href="/tzxblog/about">关于</a></li>
        <li class="li1"><a class="ha" href="/tzxblog/data">资料</a></li>
        <li class="li1"><a class="ha" href="/tzxblog/E-book">电子书</a></li>
        <li class="li1"><a class="ha" href="/tzxblog/course">历程</a></li>
        <li class="li1"><a class="ha" href="/tzxblog/collections">收藏</a></li>
      </ul>
    </div>
    <!--sidebar侧边栏-->
    <div id="content">
        <!--侧边栏-->
        <div class="aside">
           <div class="header">
             <img src="./z1.jpg" style="border-radius:75px;width:150px;height:150px" alt="some_text"></img>
           </div>
           <p><center><H1>myLocalBlog</H1></center></p>
           <p><center><H4>认真生活，快乐工作，保持理想</H4></center></p>
           <p th:text="${curAdd}"></p>
           <hr/>
           <!--  
           <ul style="list-style:none;">
              <li style="line-height:2.5"><a href="#">首页</a></li>
              <li style="line-height:2.5"><a href="#">分类</a></li>
              <li style="line-height:2.5"><a href="#">书单</a></li>
              <li style="line-height:2.5"><a href="#">关于我</a></li>
           </ul>
           
           <hr/>
           -->
              &nbsp;&nbsp;&nbsp;&nbsp;访问量：<font th:text="${readCounts}"></font><br/>
              &nbsp;&nbsp;&nbsp;&nbsp;博客数：<font th:text="${blogCounts}"></font><br/>
              &nbsp;&nbsp;&nbsp;&nbsp;原创数：<font th:text="${myCounts}"></font><br/>
              &nbsp;&nbsp;&nbsp;&nbsp;评论数：<font th:text="${commentCounts}"></font><br/>
        </div>
        <!--内容主区域-->
        <div class="main">
            <!--标题-->
            <div class="title">
               <!--  
               <H3 th:text="${blogInfo.blogTitle}"></H3>
               -->
               <H3 >分类</H3>
            </div>
            <hr/>
            <!--主要内容-->
            <div class="content1" id="curcontent" style="word-wrap:break-word;word-break:normal;width:85%">
            </div>
            <div id="testEditorMdview">
                <textarea th:utext="${categories}" id="appendTest" style="display:none;"></textarea>
            </div>
            <!--数据转换为markdown格式-->
            <script type="text/javascript" >
                 var text = document.getElementById("appendTest").value;
                 var converter = new showdown.Converter();
                 var html = converter.makeHtml(text);
                 document.getElementById("curcontent").innerHTML = html;
            </script>
            <br/>
            <div class="comments">
                 <p>发表评论：</p>
                 <textarea style="width:85%"></textarea><br/>
                 <ul style="list-style:none;">
                    <li style="line-height:2.5"><a href="#">这个一个评论测试</a></li>
                    <li style="line-height:2.5"><a href="#">这个一个评论测试发大水发沙发上发生的发顺丰</a></li>
                    <li style="line-height:2.5"><a href="#">大沙发啥地方撒旦法师打发斯蒂芬</a></li>
                    <li style="line-height:2.5"><a href="#">阿斯顿飞洒发大水发的说法</a></li>
                 </ul>
            </div>
        </div>
    </div>
    <!--页脚-->
    <div id="footer">
            <center> 版权所有  @tzx 20170926</center>
    </div>

</body>
</html>